<template>
     <!-- 轮播图 -->
    <div class="conut">
        <swiper class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :pagination="{ clickable: true }"
      :autoplay="{ autoplay: true }"
      :loop="true">
      <swiper-slide v-for="(val,i) in data" :key="i">
          <img :src="'http://www.kymid.com/testphp/public'+val.image" alt="">
          <div class="conut-zi">
            <h2>专注智能穿戴行业OEM/ODM服务</h2>
            <p>Foeus on OEM / ODM services in smart wearabte industry</p>
        </div>
      </swiper-slide>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <!-- <div class="swiper-button-prev"></div> -->
      <!-- <div class="swiper-button-next"></div> -->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
</swiper>
        <!-- <img src="../assets/img/bg.png" alt=""> -->
    </div>
    <!-- 智能手表 -->
    <div class="inde-znsb">
        <div class="w1080">
           <div class="znsb-conut">
               <div class="left">
                <img src="../assets/img/index_content_1.jpg" alt="">
                <h2>智能手表</h2>
                <p>传统手表的外观融合了现代科技的创与智</p>
                <button>
                    <a href="javascript:;">查看更多</a>
                </button>
               </div>
               <div class="right">
                <ul>
                    <li>
                <img src="../assets/img/index_content_2.jpg" alt="">
                <h2>智能手环</h2>
                <p>悄无声息改变你的生活</p>
                <button>
                    <a href="javascript:;">查看更多</a>
                </button>
                    </li>
                    <li>
                        <img src="../assets/img/index_content_2.jpg" alt="">
                        <h2>智能手环</h2>
                        <p>悄无声息改变你的生活</p>
                        <button>
                            <a href="javascript:;">查看更多</a>
                        </button>
                            </li>
                </ul>
               </div>
           </div>
           <h2 class="znsb-oem">OEM/ODM企业</h2>
           <p class="znsb-zheng">专注智能穿戴行业OEM/ODM方案服务</p>
           <div class="customization">
            <img src="../assets/img/index_content_4.jpg" class="index_content_4">
            <div class="content_4_ul">
                <ul >
                    <li v-for="(val,i) in dzhizhi" :key="i">
                        <img :src="'http://www.kymid.com/testphp/public/'+val.image" alt="">
                        <div class="content_icon">
                            <h4>{{val.name}}</h4>
                            <p>{{val.english_name}}</p>
                        </div>
                    </li>
                   <!--  <li>
                        <img src="http://www.kymid.com/testphp/public/uploads/20210624/ae01e3eeb83a1bec936a4757b97cc647.jpg" alt="">
                        <div class="content_icon">
                            <h4>硬件定制</h4>
                            <p>Hardware customization</p>
                        </div>
                    </li>
                    <li>
                        <img src="../assets/img/index_content_icon_3.png" alt="">
                        <div class="content_icon">
                            <h4>软件定制</h4>
                            <p>Software customization</p>
                        </div>
                    </li>

                    <li>
                        <img src="../assets/img/index_content_icon_4.png" alt="">
                        <div class="content_icon">
                            <h4>专业APP定制</h4>
                            <p>Professional app customization</p>
                        </div>
                    </li> -->
                </ul>
            </div>
           </div>
           <h2 class="znsb-oem">探索KY的历程</h2>
           <p class="znsb-zheng">带你一起探索KY的品牌实力</p>
           <div class="index-ky">
               <div class="ky">
                   <div class="ky-1">
                       <img src="../assets/img/index_explore_1.jpg" alt="">
                       <p>KY | 香港亚洲博览会</p>
                   </div>
                   <div class="ky-2">
                    <img :src="'http://www.kymid.com/testphp/public/'+ num3" alt="">
                    <p> KY | CES国际消费电子展</p>
                   </div>
               </div>
               <div class="ky">
               <div class="ky-3">
                <img :src="'http://www.kymid.com/testphp/public'+num5" alt="">
                <p> KY | 深圳公司总部</p>
               </div>
               <div class="ky-2">
                <img :src="'http://www.kymid.com/testphp/public'+num2" alt="">
                <p>KY | 香港会议展览中心</p>
               </div>
               </div>
               <div class="ky">
                <div class="ky-2">
                    <img :src="'http://www.kymid.com/testphp/public'+num4" alt="">
                    <p>KY | 香港秋季电子展览会</p>
                   </div>
                   <div class="ky-1">
                    <img :src="'http://www.kymid.com/testphp/public'+num1" alt="">
                    <p>KY | 香港秋季电子展览会</p>
                </div>
               </div>
           </div>
           <h2 class="znsb-oem">合作伙伴</h2>
           <p class="znsb-zheng">你也想和他们一样开启致富之门吗</p>
        </div>
    </div>
    <!-- 合作伙伴 -->
    <div class="index-hzhb"  ref="indexhz" @mousemove="gun" @mouseout="gnnn">
       <ul ref="hzhb1">
            <li v-for="(val,i) in hzuo" :key="i"><img :src="'http://www.kymid.com/testphp/public'+val.image" alt=""></li>
        </ul>
        <ul ref="hzhb2">
            <li v-for="(val,i) in hzuo" :key="i"><img :src="'http://www.kymid.com/testphp/public'+val.image" alt=""></li>
        </ul>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.css'
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay
} from 'swiper'
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])
const indexhz = ref(null)
onMounted(() => {
  swper()
  dzhi()
  tshi()
  hezhuo()
})

const { proxy } = getCurrentInstance()
const data = ref([])
async function swper () {
 const { data: res } = await proxy.$http.get('navlist')
 if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
  return false
 } else {
      data.value = res.msg
 }
}
const dzhizhi = ref([])
async function dzhi () {
const { data: res } = await proxy.$http.get('customized')
if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
  return false
 } else {
    //  console.log(res)
      dzhizhi.value = res.msg
 }
}
const tshishi = ref([])
const num1 = ref('')
const num2 = ref('')
const num3 = ref('')
const num4 = ref('')
const num5 = ref('')
async function tshi () {
const { data: res } = await proxy.$http.get('explore')
if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
  return false
} else {
    //  console.log(res)
      tshishi.value = res.msg
      num1.value = tshishi.value[0].image
      num2.value = tshishi.value[1].image
      num3.value = tshishi.value[2].image
      num4.value = tshishi.value[3].image
      num5.value = tshishi.value[4].image
}
}
const hzuo = ref([])
async function hezhuo () {
const { data: res } = await proxy.$http.get('partner')
if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
  return false
 } else {
    //  console.log(res)
      hzuo.value = res.msg
      console.log(hzuo)
 }
}
var time = setInterval(move, 5)
  function move () {
        if (proxy.$refs.hzhb2.offsetWidth - proxy.$refs.indexhz.scrollLeft <= 0) {
          proxy.$refs.indexhz.scrollLeft = 0
      } else {
            proxy.$refs.indexhz.scrollLeft++
      }
  }
  onUnmounted(() => {
     clearTimeout(time)
  })
 function gun () {
     clearTimeout(time)
 }
 function gnnn () {
     time = setInterval(move, 5)
 }

</script>
<style>
@import url('../assets/css/index.css');
/* class=" s" */
.swiper-container-horizontal > .swiper-pagination-bullets .wiper-pagination-bullet-active{
    width: 2.5rem !important;
    background-color: #85bc24 !important;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
     width: 2.5rem !important;
     height: .3125rem !important;
     border-radius: 0;
       background-color: #85bc24 !important;
}

</style>
